<template>
  <el-input v-model="name" placeholder="按名称搜索" style="width: 200px; margin-right: 10px" />
  <el-select
    v-model="sortBy"
    placeholder="排序依据"
    style="width: 180px; margin-right: 10px"
    clearable
  >
    <el-option value="commitCount" label="本月 Commit 次数" />
    <el-option value="totalChanges" label="本月代码变化行数" />
    <el-option value="allCommitCount" label="总 Commit 次数" />
    <el-option value="allTotalChanges" label="总代码变化行数" />
  </el-select>
  <el-select v-model="sortDir" placeholder="排序方向" style="width: 120px; margin-right: 10px">
    <el-option value="DESC" label="降序" />
    <el-option value="ASC" label="升序" />
  </el-select>
  <el-button type="primary" @click="loadData">搜索</el-button>

  <div class="min-h-200px mh-300px mt-3">
    <el-table
      :data="tableData"
      max-height="300px"
      :header-cell-style="{ 'text-align': 'center' }"
      @sort-change="handleSortChange"
      @row-click="handleRowClick"
    >
      <el-table-column prop="name" label="名称" />
      <el-table-column
        prop="commitCount"
        label="本月次数"
        align="right"
        sortable="custom"
        :sort-orders="['descending', 'ascending']"
      >
        <template #default="{ row }">
          <span style="font-variant-numeric: tabular-nums">{{ row.commitCount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="totalChanges"
        label="本月行数"
        align="right"
        sortable="custom"
        :sort-orders="['descending', 'ascending']"
      >
        <template #default="{ row }">
          <span style="font-variant-numeric: tabular-nums">{{ row.totalChanges }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="allCommitCount"
        label="总次数"
        align="right"
        sortable="custom"
        :sort-orders="['descending', 'ascending']"
      >
        <template #default="{ row }">
          <span style="font-variant-numeric: tabular-nums">{{ row.allCommitCount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="allTotalChanges"
        label="总行数"
        align="right"
        sortable="custom"
        :sort-orders="['descending', 'ascending']"
      >
        <template #default="{ row }">
          <span style="font-variant-numeric: tabular-nums">{{ row.allTotalChanges }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    :page-sizes="[10, 20, 50, 100]"
    style="margin-top: 20px"
    @current-change="loadData"
    @size-change="handleSizeChange"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { projectService } from '@/services/business/project.service';

const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const name = ref('');
const sortBy = ref('allTotalChanges');
const sortDir = ref('DESC');

const loadData = async () => {
  const params = {
    page: currentPage.value,
    size: pageSize.value,
    name: name.value || undefined,
    sortBy: sortBy.value,
    sortDir: sortDir.value,
  };
  try {
    const res = await projectService.getProjectSummaries(params);
    tableData.value = res.records;
    total.value = res.total;
    emit('row-selected', tableData.value[0]);
  } catch (error) {
    console.error('Error loading data:', error);
  }
};

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  currentPage.value = 1;
  loadData();
};

const handleSortChange = ({ prop, order }) => {
  sortBy.value = prop;
  sortDir.value = order === 'ascending' ? 'ASC' : order === 'descending' ? 'DESC' : '';
  loadData();
};

const emit = defineEmits(['row-selected']);

const handleRowClick = (row) => {
  emit('row-selected', row);
};

onMounted(loadData);
</script>
